<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器的权重</title>
    <style>
        /*2023-1-12：第一遍理解记忆*/
        /*
        1、样式冲突：通过不同选择器选中相同元素，并为相同样式设置不同的值时，就发生了样式冲突
        2、选择器权重（优先级）：
        （1）内联样式（行内样式）  1000
        （2) id选择器             0100
        （3）类和伪类选择器        0010
        （4）元素选择器            0001
        （5）通配选择器            0000
        （6）继承的样式            没有优先级
        */
        /*元素选择器*/
        *{
            font-size:30px;
        }
        /*4、注意：（3）在某一个样式后添加！important，此时该样式的优先级最高（慎用）*/
        div{
            color:yellow !important;
        }
        /*类选择器*/
        .red{
            color:red;
        }
    /*3、比较优先级时：将所有选择器的优先级进行相加计算，优先级越高，则越优先显示（分组选择器是单独计算的），
    4、注意：
    (1)选择器的累加：不会超过其最大的数量级   eg:类选择器再高也不会超过id选择器
    (2)如果优先级计算后相同，则优先使用靠下的样式*/
        div#box1{
            color: aqua;
        }
        div,p,span{
            color: chartreuse;
        }
    </style>
</head>
<body>
    <div id="box1" class="red">我是一个div<span>我是div中的span</span></div>
    
</body>
</html>